<template>
  <div id="message" :class="{moon:this.$store.state.isMoon}">
    
    <divider></divider>
    <!-- 添加留言 -->
    <add-comments :model="model" @getMessageList="getMessageList"></add-comments>

    <!-- 留言列表 -->
    <comments-list :message="message"></comments-list>

    <!-- 显示更多评论按钮 -->
    <div class="show-more" v-if="isMoreBtnShow" @click="showMoreMessages">
      <i class="el-icon-arrow-down"></i>
      <p>显示更多评论</p>
    </div>
  </div>
</template>

<script>
import Divider from 'views/leaveMessage/Divider.vue';
import AddComments from 'views/leaveMessage/AddComments.vue';
import CommentsList from 'views/leaveMessage/CommentsList.vue';
export default { 
  components: { 
    Divider,
    AddComments,
    CommentsList 
  },
  data() {
    return {
      model: {
        nickname: "",
        body: "",
        time: "",
        reply: "",
      },
      message: [],
      comments: [],
      page: 1,
    };
  },
  computed: {
    isMoreBtnShow() {
      if (this.comments.length > this.message.length) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    // 获取留言
    async getMessageList() {
      const res = await this.$http.get("leaveMessages");
      // console.log(res.data);
      this.comments = Array.from(res.data);
      this.message = this.comments.slice(0, 10);
    },
    showMoreMessages() {
      this.page++;
      this.message = this.comments.slice(0, 10 * this.page);
    },
  },
  created() {
    this.getMessageList();
  },
};
</script>

<style lang="scss">
div.moon {
  .show-more {
    color: #fff;
  }
}
@media screen and (min-width: 1200px) {
  #message {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    .show-more {
      text-align: center;
      margin-top: 20px;
      i {
        font-size: 28px;
      }
      p {
        font-size: 14px;
        padding: 0;
        margin: 0;
      }
    }
    .show-more:hover {
      cursor: pointer;
      color: cyan;
    }
  }
}

@media screen and (max-width: 768px) {
  #message {
    padding: 20px;
    .show-more {
      text-align: center;
      margin-top: 15px;
      i {
        font-size: 28px;
      }
      p {
        font-size: 12px;
        margin: 0;
        padding: 0;
      }
    }
  }
}
</style>
